<template>
  <div class="login-container">
    <video autoplay muted loop>
      <source src="@/assets/login/sunleadlogistics.mp4">
    </video>
    <div class="abo">
      <el-form ref="loginForm" :model="loginForm" status-icon :rules="rules" class="demo-ruleForm">
        <div class="title-container">
          <img src="@/assets/static/img/logo1.33ef7fa0.png" alt="神领物流">
        </div>
        <el-form-item prop="account">
          <svg-icon icon-class="user" />
          <el-input v-model="loginForm.account" placeholder="账号" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="password">
          <svg-icon icon-class="password" />
          <el-input v-model="loginForm.password" placeholder="密码" type="password" autocomplete="off" show-password />
        </el-form-item>
        <el-form-item prop="code">
          <svg-icon icon-class="form" />
          <el-input v-model.number="loginForm.code" style="width:200px" />
          <span @click="srcImg1()"><img :src="srcImg" alt=""></span>
        </el-form-item>
        <!-- <button @click="img">测试</button> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="login-bottom">江苏传智播客教育科技股份有限公司  版权所有Copyright 2006-2022  All  Rights  Reserved  苏ICP备16007882号-11</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        account: '',
        password: '',
        code: ''
      },
      srcImg: 'https://slwl-api.itheima.net/manager/captcha?key=100', // 验证码图片
      rules: {
        account: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码6-16位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // created() {
  //   const random = Math.floor(Math.random() * 1000)
  //   const api = `https://slwl-api.itheima.net/manager/captcha?key=${random}`
  //   const xhr = new XMLHttpRequest()
  //   xhr.open('get', api)
  //   xhr.addEventListener('readystatechange', function() {
  //     if (xhr.readyState !== 4) return
  //     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
  //       this.srcImg = xhr.responseURL
  //       document.querySelector('span img').src = xhr.responseURL
  //       console.log(xhr.responseURL)
  //     } else {
  //       console.log('请求不成功')
  //     }
  //   })
  //   xhr.send()
  // },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('验证成功！')
        } else {
          console.log('验证失败！')
          return false
        }
      })
    },
    srcImg1() {
      const random = Math.floor(Math.random() * 1000)
      this.srcImg = `https://slwl-api.itheima.net/manager/captcha?key=${random}`
    }
  }

}
</script>
<style lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  position: relative;
  video{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0.8;
  }
  .abo{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    .demo-ruleForm{
      position: absolute;
      left: 50%;
      top: 50%;
      padding: 50px;
      width: 450px;
      height: 525px;
      border-radius: 10px;
      transform: translate(-50%,-50%);
      background-color: #fff;
      color: #ccc;
      .title-container{
        text-align: center;
        padding-bottom: 30px;
        img{
          width: 195px;
          height: 54px;
        }
      }
      input{
        padding-left: 40px;
      }
      div{
        position: relative;
        .svg-icon{
          position: absolute;
          top: 14px;
          left: 15px;
          z-index:10;
        }
      }
      button{
        width: 100%;
        height: 60px;
        font-size:18px
      }
    }
    .login-bottom{
      position: absolute;
      bottom: 30px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fffccc;
    }
  }
}
</style>
